/**
 * @description  : 仓库类文书审批统一入口
 * @descriptionDetail : 仓库类文书审批统一入口
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-11-05 09:49:31
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <u-form v-model="formData" label-width="auto" label-position="top">
        <u-form-item label="文书号">
          <view class="lay-file-root">
            <view class="lay-file">
              {{ docIns.docNo }}
            </view>
          </view>
        </u-form-item>
        <u-form-item :label="pi.title" v-for="pi in commonDoc.pageInfos" :key="pi.title">
          <view class="lay-file-root">
            <view class="lay-file">
              {{ docIns[pi.column] }}
            </view>
          </view>
        </u-form-item>
        <u-form-item label="文书">
          <view class="lay-file-root">
            <view class="lay-file" @click="toPrevView()">
              <text class="lay-file-title">
                {{ commonDoc.name }}
              </text>
            </view>
          </view>
        </u-form-item>
        <u-form-item label="备注" v-if="!!docData.memo">
          <view class="lay-file-root">
            <view class="lay-file">
              {{ docData.memo }}
            </view>
          </view>
        </u-form-item>
        <u-form-item label="审核审批时间">
          <view class="lay-file-root">
            <view class="lay-file">
              {{ initAppDate }}
            </view>
          </view>
        </u-form-item>
		
        <u-gap :marginRight="getGapMarginRowNumber()" :marginLeft="getGapMarginRowNumber()" :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_form_item_bottom_border_color"></u-gap>
        <fsection title="申请材料"></fsection>
        <u-form-item label="">
          <attachment-upload :fileList="fileList" v-if="fileList.length > 0"></attachment-upload>
          <u-empty v-else text="无附件" style="width: 100%;" mode="list"></u-empty>
        </u-form-item>
        <u-gap v-if="currApprove.show" :marginRight="getGapMarginRowNumber()" :marginLeft="getGapMarginRowNumber()" :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_form_item_bottom_border_color"></u-gap>
        <fsection title="审批意见" v-if="currApprove.show"></fsection>
        <u-form-item :label="currApprove.gfaName" v-if="currApprove.show" :required="true">
          <view class="approve-lay">
            <u-input v-model="currApprove.approveInfo" type="textarea" placeholder="请输入审核意见"></u-input>
            <view class="approve-lay-bt">
              <view>
                审核人: <text style="margin-left: 10rpx;color: #393B3D;">
                  {{ currApprove.approvePersonName }}
                </text>
              </view>
              <view style="text-align: right;">
                审核时间: <text style="margin-left: 10rpx;color: #393B3D;">
                  {{ currApprove.approveDate }}
                </text>
              </view>
            </view>
          </view>
        </u-form-item>
        <u-gap :marginRight="getGapMarginRowNumber()" :marginLeft="getGapMarginRowNumber()" :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_form_item_bottom_border_color"></u-gap>
        <fsection title="审批历史"></fsection>
        <u-form-item label="" :border-bottom="false">
          <view style="width: 100%;color: #000000;margin-left: 20rpx;">
            <flow-his :approve="flowHis" :haveEnd="step === 'view'"></flow-his>
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="submit-btns btn-other-cls" v-if="step !== 'view'">
      <u-button class="u-btn" size="default" type="error" @click="submit(0)">
        退回
      </u-button>
      <u-button class="u-btn" size="default" type="primary" @click="submit(1)">
        审批通过
      </u-button>
    </view>
    <!-- <u-calendar mode="date" v-model="calShow" @change="dateConfirm"></u-calendar> -->
  </view>
</template>

<script>
import storeService from "@/service/store/store.service";
import {
  COMMON_DOC,
} from "@/service/enum/common-doc";
import flowHis from "@/components/flow-his.vue";
import fsection from "@/components/form-section.vue";
import AttachmentUpload from "./components/attachmentUpload.vue";
export default{
  components:{flowHis,fsection,AttachmentUpload,},
  onLoad() {
    this.preParam = this.getRouteParam() || {};
    this.showDefaultTitle = false;
    if(!this.preParam.bizUuid){
      this.$u.toast('业务主键为空');
      return;
    }
  },
  data(){
    return {
      preParam:{},
      bean:{},
      formData:{},
      user: this.$store.state.userInfo.user,
      gfaCode: "",
      commonDoc: {},
      docIns: {},
      flowHis: [],
      approves: [],
      currApprove:{
        show:false,
      },
      docData: {},
      initAppDate: this.$u.date(Date.now(), 'yyyy-mm-dd'),
      tmpParam: undefined,
      showPdf:true,
      haveEnd:false,
      viewType:"",
      step:"",
      isLast:false,
      fileList:[],
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      this.$modal.showLoading('请稍后...');
      storeService.getDocByBizUuid(this.preParam.bizUuid).then(res => {
        this.$modal.hideLoading();
        if(res.success){
          this.bean = res.bean || {};
          this.viewType = this.bean.statusName;
          this.initDocData();
        }else{
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        this.$u.toast('请求失败');
      });
    },
    initDocData(){
      this.$modal.showLoading('文书加载中...');
      storeService.docInfo(this.bean.docId, this.bean.docType).then(res => {
        this.$modal.hideLoading();
        if(res.success){
          this.docData = res.bean || {};
          this.docIns = this.docData.doc || {};
          this.approves = this.docData.flowInfo.approves || [];
          this.step = this.docData.flowInfo.step || 'add';
          this.flowHis = this.docData.flowInfo.history || [];
          this.gfaCode = this.docIns.gfCode || '';
          this.commonDoc = COMMON_DOC[this.gfaCode];
          this.navTitle = this.commonDoc.name;
          this.updateTitle();
          this.renderApprove();
          this.queryFile();
        }else{
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        this.$u.toast('文书加载失败');
        console.log(e);
      });
    },
    queryFile(){
      storeService.getFiles(this.docIns.docId).then(res => {
        if(res.success){
          this.fileList = res.data;
        }
      }).catch(e => {
        console.log(e);
      });
    },
    /**
	 * 渲染需要审批的节点
	 */
    renderApprove() {
      if (this.step !== 'view') {
        for (let i = 0; i < this.approves.length; i++) {
          if(this.approves[i].gfaCode == this.step){
            this.currApprove = {
              show :true,
              ...this.approves[i],
            };
            this.currApprove.approveDate = this.$u.timeFormat(Date.now(), "yyyy年mm月dd日");
            this.currApprove.approveInfo = this.currApprove.approveInfo || '';
            this.currApprove.approvePersonName = this.currApprove.approvePersonName || this.user.personName;
            this.currApprove.approvePersonUuid = this.currApprove.approvePersonUuid || this.user.personUuid;
            break;
          }
        }
      }
      if (this.approves.length) {
        let last = this.approves[this.approves.length - 1];
        this.isLast = last.gfaCode === this.step;
      }
    },
    getGapMarginRowNumber(){
      return "-" + this.$theme.cm_content_paddng_row.replace('rpx', '');
    },
    updateTitle(){
        this.$deviceApi.setTitle && this.$deviceApi.setTitle(COMMON_DOC[this.gfaCode].name);
        this.navTitle = COMMON_DOC[this.gfaCode].name;
        this.$forceUpdate();
    },
    submit(type){
      if (this.$u.test.isEmpty(this.currApprove.approveInfo)) {
        this.$u.toast('请输入意见');
        return false;
      }
      if(type == 0){
        this.agreeDisagree(true, '', '');
      }else{
        if (!this.isLast) {
          let status = this.docIns.status;
          status = parseInt(status);
          this.$u.route({
            url: "/pages/commonPage/flowUserSelectComponent",
            params: {
              flowFormCode: this.gfaCode,
              docInsUuid: status > 0 ? this.docIns.docId : '',
            },
          });
          return false;
        }
        this.agreeDisagree(false, '', '');
      }
    },
    updateBackState(param) {
      if (param.flowUserSelectBack) { // 选择审批人
        let nextPersons = [];
        let nextPersonNames = [];
        for (let fu of param.flowUserSelectBack) {
          nextPersons.push(fu.personId);
          nextPersonNames.push(fu.personName);
        }
        this.agreeDisagree(false, nextPersons.join(","), nextPersonNames.join(','));
      }
    },
    getApproveInfo(approvePersonUuids,nextUsers){
      return {
        doc: {
          docId: this.docIns.docId,
          undertaker: nextUsers,
          undertakerUuids: approvePersonUuids,
        },
        approve: {
          gfaCode: this.step,
          gfaName: this.currApprove.gfaName,
          approveInfo: this.currApprove.approveInfo,
          approveDate: this.currApprove.approveDate,
        },
      };
    },
    agreeDisagree(isRollBack, approvePersonUuids,nextUsers) {
      let params = this.getApproveInfo(approvePersonUuids,nextUsers);
      let fun = storeService.agree;
      let text = isRollBack ? '回退成功！' : '提交成功！';
      if (isRollBack) {
        fun = storeService.disagree;
      }
      this.$modal.showLoading('审批中...');
      fun(params).then(dr => {
        this.$modal.hideLoading();
        if (dr.success) {
          this.backPrev({
            paramKey: "refresh",
            param: true,
          });
        } else this.$u.toast(dr.msg);
      }).catch(e => {
        this.$modal.hideLoading();
        console.log(e);
      });
    },
    toPrevView(){
      this.downloadFile();
    },
    getHaveHisEnd(){
      return this.viewType == 'view'
    },
    downloadFile(){
      if(this.$u.test.isEmpty(this.docIns.pdfId)){
        this.$u.toast('文书PDF不存在');
        return;
      }
      // 定义跳转参数
      const params = {
        fileId: this.docIns.pdfId,
        fileName: this.commonDoc.name,
        url: process.uniEnv.BASE_API + "/store/downloadFile",
      };
      this.setRouteParam(params);
      // 跳转详情页面
      this.$u.route("/pages/commonPage/printerComponent");
    },
  },
}
</script>

<style scoped lang="scss">
	.page{
		padding: 0;
	}
	.content {
		padding-bottom: 70px;
		padding-left: $cm-content-paddng-row;
		padding-right: $cm-content-paddng-row;
	}
	
	.item-inner .item-title.label {
		width: 35%;
	}
	
	.display-flex {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
	
	.input-label {
		min-width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	
		input[type='radio'],
		input[type='checkbox'] {
			width: 14px;
		}
	}
	
	.article-title {
		text-align: center;
		background-color: #FFF;
	}
	
	.article-main-title {
		color: #000000;
		font-size: 18px;
		text-align: center;
		color: #000;
		font-weight: 600;
	}
	
	.article-sub-title {
		font-size: 15px;
		margin: 3px;
	}
	
	.article-content-detail {
		margin: 3px;
		text-align: center;
		color: #000;
		height: 22px;
		font-size: 13px;
	}
	
	.basic-info:after {
		display: none;
	}
	
	.auditList:before {
		display: none;
	}
	
	.basic-info li:last-child .item-inner {
		border-bottom: 0.5px solid #E6E6E8;
	}
	
	.long-txt {
		width: 65%;
		white-space: normal;
		max-height: 150px;
		overflow-y: auto;
	}
	
	.list textarea {
		height: 60px;
		font-size: 13px;
		border: 1px groove;
		padding: 5px;
	}
	
	.list textarea:disabled {
		border: none;
	}
	
	.item-content-detail img {
		height: 12px;
	}
	
	.returnAudit {
		color: #000 !important;
	}
	
	.part-title {
		text-align: center;
		font-weight: 600;
		padding: 6px;
		background-color: #fff;
		font-size: 14px;
	}
	
	.text-label {
		color: #000;
		text-align: left;
	}
	
	.lay-root {
		width: 100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.lay-title {
		align-self: center;
		flex-shrink: 0;
		font-size: 32rpx;
	}
	
	.block {
		padding: 10px 0px;
	}
	
	.lay-content {
		align-self: center;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 28rpx;
		white-space: normal;
		overflow: hidden;
	}
	
	.lay-file-root {
		display: flex;
		flex-direction: column;
	}
	
	.lay-file {
		align-self: flex-end;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
	}
	
	.timeline-item {
		padding: 2px 0px 15px;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
	}
	
	.lay-file-title {
		font-size: 30rpx;
		color: $u-type-primary;
	}
	
	.timeline-todo {
		background-color: red !important;
	}
	
	.timeline-finish {
		background-color: green !important;
	}
	
	.timeline-item-date {
		width: 100px;
		flex-shrink: 0;
		text-align: right;
		box-sizing: border-box;
	}
	
	.timeline-item-divider {
		margin-left: 15px;
		margin-right: 15px;
		position: relative;
		width: 10px;
		height: 10px;
		background: #bbb;
		border-radius: 50%;
		margin-top: 3px;
		flex-shrink: 0;
	}
	
	.timeline-item-divider:after {
		top: 100%;
	}
	
	.timeline-item-divider:before {
		bottom: 100%;
	}
	
	.timeline-item-divider:after,
	.timeline-item-divider:before {
		background-color: #c7c2c2;
		content: ' ';
		width: 1px;
		height: 100vh;
		position: absolute;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
	}
	
	.timeline-item:last-child .timeline-item-divider:after {
		display: none;
	}
	
	.timeline-item:first-child .timeline-item-divider:before {
		display: none;
	}
	
	.timeline-item-content {
		margin: 2px;
		min-width: 0;
		position: relative;
		flex-shrink: 10;
		text-align: left;
	}
	
	.timeline-item-title {
		font-size: 17px;
		font-weight: 600;
	}
	
	.slot-content {
		padding: 30rpx;
	}
	.approve-lay{
		width: 100%;
	}
	.approve-lay-bt{
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: inline-flex;
		flex-direction: row;
		color: $cm-form-item-label-color;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}
	/deep/uni-button {
		width: 40%;
	}
</style>